<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            width: 500px;
            height: 500px;
            border: 10px solid;
            margin: 50px;
            padding: 20px;
            box-sizing: border-box;
            /*box-sizing: content-box;*/
            overflow-y: auto;
        }

        .item {
            height: 1500px;
            width: 1500px;
            padding: 10px;
            margin: 10px;
            border: solid 10px;
            /*box-sizing: border-box;*/
        }
    </style>
</head>
<body>
<ul>
    <li>div.style.top(只有在style中设置才有效)</li>
    <li>div.style.left(只有在style中设置才有效)</li>

    <li>div.style.margin(只有在style中设置才有效)</li>
    <li>div.style.border(只有在style中设置才有效)</li>
    <li>div.style.padding(只有在style中设置才有效)</li>

    <li>div.scrollTop(子容器卷去的高度)</li>
    <li>div.offsetTop(容器距离父容器的高度)</li>
    <li>div.clientTop(border的高度)</li>

    <li>div.offsetLeft(同理)</li>
    <li>div.clientLeft(同理)</li>

    <li>
        <div>div.scrollHeight</div>
        <div>假如box-sizing:content-box时 padding+子容器高度+子容器margin+子容器padding+子容器border</div>
        <div>假如box-sizing:border-box时  padding+子容器高度+子容器margin</div>
    </li>
    <li>
        <div>div.offsetHeight</div>
        <div>假如box-sizing:content-box时 容器的高度+padding+border</div>
        <div>假如box-sizing:border-box时 容器的高度</div>
    <li>div.clientHeight(offsetHeight-border-水平滚动条高度)</li>

    <li>div.scrollWidth(同理)</li>
    <li>div.offsetWidth(同理)</li>
    <li>div.clientWidth(同理)</li>
</ul>
<div id="container" class="container" style="border: 10px solid;top: 100px;left: 50px;">
    <div class="item"></div>
</div>
<script>
    // 节流函数
    function throttle(fn, time = 300) {
        let timer = null;

        return function () {
            if (timer) {
                return;
            }
            timer = setTimeout(function () {
                fn && fn();
                clearTimeout(timer);
                timer = null;
            }, time)
        }
    }

    function handler() {
        // console.log('div.style.top', container.style.top);
        // console.log('div.style.left', container.style.left);
        console.log('scrollHeight', container.scrollHeight);
        console.log('offsetHeight', container.offsetHeight);
        console.log('clientHeight', container.clientHeight);
        // console.log('scrollTop', container.scrollTop);
        // console.log('offsetTop', container.offsetTop);
        // console.log('clientTop', container.clientTop);
    }

    window.onscroll = throttle(handler)
    container.onscroll = throttle(handler)
</script>
</body>
</html>